<template>
  <div class="chart-size"></div>
</template>

<script>
import resize from "../../../../../components/echart/mixins/resize";

export default {
  mixins: [resize],
  props: {
    currentData: {
      type: Array,
      default: function () {
        return [
          {value: 735, name: '直接访问'},
          {value: 580, name: '邮件营销'},
        ];
      }
    },
    title: {
      type: String,
      default: "图标标题"
    },
    initData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    chartName: {
      type: String,
      default: "年统计"
    }
  },
  data() {
    return {
      chartData: [
        {value: 735, name: '直接访问'},
        {value: 580, name: '邮件营销'},
      ],
    };
  },
  computed: {
    option: function () {
      return {
        title: {
          text: this.title,
          textStyle: {
            fontSize: 15,
          },
          top: 5,
          left: 10,
        },
        grid: {
          height: "60%",
          top: 35,
          left: 55
        },
        series: [
          {
            name: this.chartName,
            type: 'pie',
            radius: '80%',
            data: this.chartData,
          }
        ],
        tooltip: {
          trigger: "item",
        },
      };
    },
  },
  methods: {
    /**
     * 更新数据
     */
    updateData: function () {
      let option = {
        series: [
          {
            name: this.legend,
            data: this.chartData,
            type: "pie",
          },
        ],
      }
      this.chart.setOption(option);
    },
  },
  watch: {

    /**
     * 更新当前值
     * @param val
     */
    currentData: function (val) {
      this.chartData = val;
      this.updateData();
    },

    /**
     * 初始化数据
     * @param val
     */
    initData: function (val) {
      this.chartData = val;
      this.updateData();
    },

    /**
     * 是否进入loading
     * @param val
     */
    loading: function (val) {
      if (val) {
        this.chart.showLoading();
      } else {
        this.chart.hideLoading();
      }
    }
  },
  mounted() {
    this.chartData = this.currentData;
    this.updateData();
  }
}
</script>

<style scoped>
.chart-size {
  height: 100%;
  width: 100%;
}
</style>